<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            #div1{ width: 1000px;height: 800px;background-image: url(./part2/111\ \(1\).jpg);background-attachment: fixed;}
            #div2{ width: 1000px;height: 800px;background-image: url(./part2/111\ \(2\).jpg);background-attachment: fixed;}
            #div3{ width: 1000px;height: 1300px;background-image: url(./part2/111\ \(3\).jpg);background-attachment: fixed;}
  table{background-color: white;}
  </style>
</head>
<body>
    <div id="div1">
        <form action="">
            <table border="1" cellpadding="30">
              <Tbody>  <!--tr为行  -->
                  <tr>   
                    
                       <td rowspan="4"> 总体信息</td><!--总体信息占了4行，rowspan=4  -->
                       <td colspan="2"><center>用户注册 </center></td>  <!--用户注册占了2列，cowspan=2 -->
                  </tr>
                  <tr>   
                      <td> 用户名：</td>
                      <td> <input type="text" placeholder="请输入用户名"></td>
                 </tr>
                <tr>   
                  <td> 密码：</td>
                  <td> <input type="password" placeholder="请输入密码"></td>
                  </tr>
                  <tr>   
                      <td colspan="2"> <center> <input type="submit"> <input type="reset"> 
                      </center></td>
              </tr>
              
              </Tbody>
            </table>
            
          </form>
      
    </div>
    <div id="div2">
        
        <table border="5" cellpadding="30" cellspacing="30" >   
            <!-- cellpadding：单元格内的空间
            cellspacing ：单元格之间的空间 -->
        <caption> <strong>天气 </strong>  </color></caption>    
        <tHead>
            <tr>   
                <th colspan="2">日期</th>   <!-- 合并列 -->
             
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <Tbody>
        <tr>
            <td rowspan="2">2020年10月12日</td> <!-- 合并行 --> 
            <td>白天</td>
            <td><img src="./part1/timg.jpg" alt="" wideth="150" height="80"></td>
            <td>天气下雨，出门带伞</td>
        </tr>
        <tr>
            <!-- <td>2020年10月12日</td>   -->
            <td>  夜晚</td>
            <td><img src="./part1/timg.jpg" alt="" wideth="150" height="80"></td>
            <td>天气下雨，出门带伞</td>
        </tr>
 
        <tr>
            <td rowspan="2">2020年10月13日</td>
            <td>白天</td>
            <td><img src="./part1/timg2.jpg" alt=""  wideth="150" height="80"></td>
            <td>天气晴朗，适宜出门</td>
        </tr>
        <tr>
            <!-- <td>2020年10月13日</td> -->
            <td>夜晚</td>
            <td><img src="./part1/timg2.jpg" alt=""  wideth="150" height="80"></td>
            <td>天气晴朗，适宜出门</td>
        </tr>

        </Tbody>
        <Tfoot>

        </Tfoot>
        </table>
    </div>
    <div id="div3">
        <form action=""> <!--action 提交表单的地址  -->
            <h2>输入框：</h2>
            <input type="text" placeholder="请输入用户名">
            <h2>密码框：</h2>
            <input type="password" placeholder="请输入密码">
            <h2>复选框(多选框)：</h2>
            <input type="checkbox" checked>苹果
            <input type="checkbox" checked="checked">香蕉
            <input type="checkbox">梨子
            <input type="checkbox">桔子
            <input type="checkbox" disabled >草莓<!--diabled 被禁止使用 是的选项框无法选择  -->
            <h2>单选框：</h2>
            <input type="radio"  name="name1">男生
            <input type="radio" name="name1">女生
            <h2>上传文件</h2>
            <input type="file">
            <h2>多行文本那框</h2> 
           <textarea name="" id="" cols="30" rows="10"></textarea><!--30列10 行  -->
           <h2>下拉菜单</h2>
           <select name="" id="">
            <option value="" selected  disabled>请选择</option><!--  单选-->
               <option value="">重庆</option>
               <option value="">北京</option>
               <option value="">上海</option>
               <option value="">天津</option>
           </select>
        
           <select name="" id="" multiple>  <!-- 也可以加在其他属性当中多选 -->
         <option value="" selected  disabled>请选择</option>
               <option value="">重庆</option>
               <option value="">北京</option>
               <option value="">上海</option>
               <option value="">天津</option>
           </select>
         
           <h2>上传文件</h2>
           <input type="file" multiple> <!-- 上传文件多选 -->
          
            <h2>重置按钮---提交按钮</h2>
        <input type="submit">
        <input type="reset">
            </form>
    </div>
   

</body>
</html>